<template>
  <div class="trend-root">
    <formTitleVue
      title="预警趋势统计"
      :selectOptions="selectOptions"
      @selectChange="selectChange"
    />
    <!-- <div id="echarts-trend"></div> -->
    <myLine domId="earlyWarning-trend-echarts" height="30vh" :chartsData="chartsData"/>
  </div>
</template>

<script>
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import myLine from '@/components/Echarts/myLine.vue';
import { time_select_optios } from '@/utils/global.js';
import {alarmList} from "@/api/alarm/statistics";

export default {
  name: "trend",
  components: {
    formTitleVue,myLine,
  },
  props: {
    alarmTypeOptions: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      selectOptions: [
        {
          selectValue: "",
          options: this.alarmTypeOptions,
          changeFn: this.selectChange3,
        },
        {
          selectValue: "近一月",
          options:[
            { label: "近一月", value: "近一月" },
            { label: "近半年", value: "近半年" },
            { label: "近一年", value: "近一年" },
          ],
          changeFn:this.selectChange1
        }
      ],
      chartsData: {
        xData: ["06", "07", "08", "09", "10"],
        yData: [],
      },
      dateTypeObject:{ "近一月":"03", "近半年":"02", "近一年":"02"},
      searChForm: {
        startTime: '',
        endTime: '',
        type:1,
        dateType:"",
        modeType:"",
      },
    };
  },
  methods: {
    selectChange3(item){
      this.searChForm.modeType = item
      this.search()
    },
    selectChange(item) {
      this.searChForm.startTime = time_select_optios[item].startTime+" 00:00:00"
      this.searChForm.endTime = time_select_optios[item].endTime+" 23:59:59"
      this.searChForm.dateType = this.dateTypeObject[item]
      this.search()
      //this.chartsData.xData=["06", "07", "08", "09", "10","11"];
    },
    search() {
      this.fetch({
        areaCode:this.$store.state.account.user.deptIds,
        ...this.searChForm,
      })
    },
    fetch(params = {}) {
      alarmList(params).then(res => {
        if (res.code == 200) {
          this.chartsData.xData=res.data.xdata
          this.chartsData.yData=res.data.ydata
        } else {
          this.$message({
            message: this.$t('tips.systemException'),
            type: 'error'
          })
        }
      }).finally(final => {
        console.log("error")
      })
    },
    getData() {
      this.chartsData.yData = [{
        name: '总数',
        data: [150, 230, 224, 218, 135]
      },
      {
        name: '市政设施',
        data: [180, 260, 234, 178, 105]
      },
      ];
    },
  },
  created() {
    this.selectChange(this.selectOptions[1].selectValue);
  },
};
</script>

<style lang="scss" scoped>
.trend-root {
  #echarts-trend {
    height: 30vh;
  }
}
</style>
